<template>
    <div class="banner">
        <div class="banner_box">
            <p class="title">OPPO Find X7 Ultra</p>
            <p class="big_font">大师影像 更有分量</p>
            <img src="../../assets/img/font.jpg" alt="">
        </div>
        <p class="remark">
            备注：画面示意为 Find X7 系列，产品图仅供参考，请以实物为准。
        </p>
        <div class="mask"></div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const num = ref(0)
const type = ref(false)
const Number = ref(0)
window.addEventListener('scroll', function () {
    var distanceFromTop = document.documentElement.scrollTop;
    var opacityValue;

    if (distanceFromTop != 0) {
        opacityValue = distanceFromTop / 1000; // 根据滚动距离计算透明度
        opacityValue = Math.min(opacityValue, 1); // 确保透明度不大于1
    } else {
        opacityValue = 0; // 滚动到顶部时完全隐藏
    }
    document.querySelector('.mask').style.opacity = opacityValue;
    if (distanceFromTop > 190 && distanceFromTop < 800) {
        num.value = distanceFromTop
        type.value = true
        Number.value = (distanceFromTop / 10) - 20

        document.querySelector('.banner').style.transform = 'translate(' + 0 + 'px' + ',' + -Number.value + 'px' + ')';
    } else {
        type.value = false
    }

})
</script>

<style lang="scss" scoped>
.banner {
    height: 680px;
    padding: 0 60px;
    box-sizing: border-box;
    background-image: url(../../assets/img/banner.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0px -110px 0 -110px;
    position: sticky;
    top: 0;
    z-index: -10000;
    transform: translate(0px, 0px);


    .banner_box {
        width: 290px;
        height: 250px;
        text-align: left;
        position: relative;
        left: 30px;
        top: calc(50% - 150px);

        .tittle {
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 24px;
        }

        .big_font {
            font-size: 60px;
            font-weight: bold;
            line-height: 84px;
            margin-bottom: 16px;
        }

        img {
            width: calc(100% - 20px);
        }
    }

    .remark {
        font-size: 12px;
        transform: scale(.6);
        color: #f0f0f0;
        position: absolute;
        bottom: 120px;
        // left: 50px;
        left: 15px;
    }

    .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 100000;
        background-color: #000;
        top: 0;
        opacity: 0;
        left: 0;

    }
}
</style>